<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登入页面</title>
		<!-- onfocus		获取焦点
		onblur		失去焦点
		onchange		值变化时触发
		页面初始化
		onload 		页面初始化完毕后执行的动作
 -->
	</head>
	<body>
		<form>
		用户名：	<input type="text" name="user" id="user" value="" onfocus="user1()"onblur="user2()" /><br>
		密码：	<input type="password" name="pwd" id="pwd" value="" onfocus="pwd1()"onblur="pwd2()" /><br>
		<input type="submit" name="sub" id="sub" value="提交" onclick="bt()" />
		</form>
	</body>
	<script type="text/javascript">
		// 3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		//          3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		//          3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		//          3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		//          3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		//               密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
			
		function user1(){
			console.log("用户在输入名称")
		}
			
		function user2(){
			var users=document.getElementById('user').value;
				
			if(users==''){
				alert('没有输入用户名');
			}
		}
		function pwd1(){
			console.log("用户在输入密码")
		}
			
		function pwd2(){
			var pwds=document.getElementById('pwd').value;
				
			if(pwds==''){
				alert('没有输入密码');
			}
		}
			 
		 function bt(){
			 var users=document.getElementById('user').value;
			 var pwds=document.getElementById('pwd').value;	
				 
			 if(users==''){
				 console.log("用户名为空");
			 }
				 
			 if(pwds==''){
				 console.log("密码为空");
			 }
				 
			 if(users==''&&pwds==''){
				console.log('用户名和密码为空');
			 }
		 }
	</script>
</html>
